<template>
  <div>
    <GridTable v-bind="gridProps" v-on="events" ref="gridTableRef"></GridTable>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { FileGroupApi } from '@/services/api/file-group';
import type { FileGroup } from '@/services/modules';
const gridProps = reactive<GridOptions<FileGroup>>({
  api: FileGroupApi,
  params: {
    'remark-ct': '',
  },
  config: {
    columns: [
      {
        type: 'index', // 序号列
        width: 60,
        align: 'center',
      },
      {
        width: 60,
        type: 'selection',
      },
      // {
      //   type: 'checkbox',
      //   width: 60,
      //   align: 'center',
      // },
      {
        title: 'ID',
        field: 'id',
        width: 80,
        sortable: true,
        align: 'center',
      },
      {
        title: '备注',
        field: 'remark',
        showOverflow: 'tooltip',
        minWidth: 120,
        renderer(h, { row }) {
          // return (
          //   <>
          //     <span title={row.remark}>{row.remark ? row.remark : '- -'}</span>
          //   </>
          // );
          return h('span', { title: row.remark }, row.remark ? row.remark : '- -');
        },
      },
      {
        title: '标签',
        field: 'tags',
        showOverflow: 'tooltip',
        minWidth: 150,
        renderer(h, { row }) {
          return tagFun(h, row);
        },
      },
      {
        title: '关联ID',
        field: 'ids',
        width: 180,
        showOverflow: 'title',
        renderer(h, { row }) {
          return h('span', {}, row.ids ? JSON.parse(row.ids).join(',') : '- -');
        },
      },
      {
        title: '类型',
        field: 'type',
        width: 100,
        align: 'center',
        renderer(h, { row }) {
          return h('span', {}, row.type === 2 ? '图片' : '文档');
        },
      },
      {
        title: '创建时间',
        field: 'createTime',
        width: 180,
        sortable: true,
        align: 'center',
      },
      {
        title: '更新时间',
        field: 'updateTime',
        width: 180,
        align: 'center',
        renderer(h, { row }) {
          return fun(h, row);
        },
      },
      {
        title: '状态',
        field: 'status',
        width: 100,
        align: 'center',
        renderer(h, { row }) {
          return h(TinySwitch, {
            props: {
              modelValue: row.status,
              trueValue: 1,
              falseValue: 0,
            },
          });
        },
      },
      {
        title: '文件组',
        field: 'fileGroup',
        width: 150,
        showOverflow: 'tooltip',
        renderer(h, { row }) {
          return h('span', {}, row.updateTime ? row.updateTime : '- -');
        },
      },
      {
        title: '文件ID',
        field: 'fileId',
        width: 200,
        showOverflow: 'tooltip',
      },
      {
        title: '操作',
        minWidth: 250,
        align: 'center',
        fixed: 'right',
        renderer: (h) => {
          return h(TinyActionMenu, {
            props: {
              mode: 'card',
              options: [
                {
                  label: '远程登陆',
                },
                {
                  label: '开机',
                  disabled: true,
                },
                {
                  label: '关机',
                },
                {
                  label: '重启',
                },
                {
                  label: '网络设置',
                  children: [
                    { label: '更改安全组', disabled: true },
                    { label: '切换 VPC', divided: true },
                  ],
                },
              ],
            },
            on: {
              'item-click'(data: any) {
                console.log(data);
              },
            },
          });
        },
      },
    ],
    sortMethod({
      order,
      property,
      data,
    }: {
      order: 'asc' | 'desc';
      property: string;
      data: FileGroup[];
    }) {
      console.log(order, property);
      return data;
    },
  },
});

const events = {
  // 'cell-click': (e: any) => {
  //   console.log(e);
  // },
  // 'scroll': (e: any) => {
  //   console.log(e);
  // },
  'select-change': (e: any) => {
    console.log(e);
  },
};
</script>

<style scoped></style>
